<template>
  <el-date-picker
      v-model="time_range"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
  </el-date-picker>
  <el-button id="confirm_button"
             type="primary"
             size="medium"
             style="margin-left: 10px"
             @click="on_click_confirm_button">
    确认
  </el-button>
  <div id="chart_box" style="width: 600px; height: 500px">

  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
  name: "absent_statistics",
  props: ['group_code'],
  data() {
    return {
      time_range: '',

      chart: '',

      result_visible: false,
    }
  },
  methods: {
    on_click_confirm_button() {
      if (this.time_range.length !== 2) {
        this.$message.error('请选择时间段')
      } else {
        // time_range 由两个Date对象组成
        axios.post(this.$store.state.post_site_dir.rehearse_statistics,
            {
              key: this.$store.state.key,
              group_code: this.group_code,
              start_year: this.time_range[0].getFullYear(),
              start_month: this.time_range[0].getMonth() + 1,
              start_day: this.time_range[0].getDate(),
              end_year: this.time_range[1].getFullYear(),
              end_month: this.time_range[1].getMonth() + 1,
              end_day: this.time_range[1].getDate(),
            })
            .then((res) => {
              if (res.data.error_code !== 0) {
                this.$message.error('获取失败，请重试')
              } else {
                this.set_chart(res.data.source)
                this.result_visible = true
              }
            })
      }

    },

    set_chart(source) {
      this.chart.clear()
      this.chart.setOption({
        dataset: {
          source: source
        },
        grid: { containLabel: true },
        xAxis: { name: '次数' },
        yAxis: { type: 'category' },
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 0,
          max: 16,
          // Map the score column to color
          text: ['16次', '0次'],
          dimension: 0,
          inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
          }
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'inside'
            },
            encode: {
              // Map the "amount" column to X axis.
              x: '次数',
              // Map the "product" column to Y axis
              y: '姓名'
            }
          }
        ]
      });
    },
  },
  mounted() {
    this.chart = echarts.init(document.getElementById("chart_box"))
  }
}
</script>

<style scoped>

</style>